<template>
    <div class="jcupload">
        <el-upload
            v-if="fileSize>0 && scene=='image'"
            :action="uploadApi"
            :show-file-list="true"
            :on-success="handleFileSuccess"
            :on-remove="handleFileRemove"
            :before-upload="beforeFileUpload"
            :headers="{clientname: clientname, Authorization: token}"
            :file-list='fileList'
            :limit="fileSize"
            :list-type='listType'
            :multiple="true"
            >
            <img v-if="dataUrl && fileSize == 0" :src="dataUrl" :style="{borderRadius: borderRadius + 'px'}" class="avatar">
            <i v-else class="el-icon-plus" :class="fileSize == 0 ? 'avatar-uploader-icon' : 'photos-uploader-icon'"></i>
        </el-upload>
        <!-- fileSize==0表示单张上传 -->
        <el-upload
            v-if="fileSize==0 && scene=='image'"
            :action="uploadApi"
            :show-file-list="false"
            :on-success="handleFileSuccessForOne"
            :on-remove="handleFileRemove"
            :before-upload="beforeFileUpload"
            :headers="{clientname: clientname, Authorization: token}"
            :file-list='fileList'
            :limit="fileSize"
            :multiple="true"
            >
            <img v-if="dataUrl" :src="dataUrl" class="avatar">
            <div v-if="!dataUrl" class="plus"><i class="el-icon-plus"></i></div>
        </el-upload>
        
    </div>
</template>
<script>
import {uploadApi_qlw} from '@/api/common.js'
import {clientname} from '@/settings'
import { number } from 'echarts/lib/export';
import { getToken } from '@/utils/auth'
export default {
    name: 'jcupload',
    components:{},
    props:{
        scene: {
            type: String,
            default: 'image'
        },
        filePath:{
            type: String,
            default: 'file'
        },
        fileSize:{
            type:  Number,
            default: 0
        },
        listType:{
            type:  String,
            default: ''
        },
        flag:{
            type: Number,
            default: -1
        },
        fileList:{
            type: Array,
            default: res=>[]
        },
        fileUrl:{
            type:  String,
            default: ''
        },
        borderRadius:{
            type: Number,
            default: 0
        },
        model: {
            type: Object,
            default: ()=>{}
        }
    },
    data(){
        return{
            uploadApi: uploadApi_qlw,
            dataUrl: '',
            fileType: '',
            clientname: clientname,
            token: ''
        }
    },
    created(){
        this.token = 'token ' + getToken()
    },
    watch: {
        fileUrl:{
            immediate : true,
            handler(val){
                this.dataUrl = this.fileUrl
            }
        }
        // }
        // fileUrl() {
        //     console.log('检测到数据变化', this.dataUrl)
        //     this.dataUrl = this.fileUrl
        // },
    },
    methods:{
        handleFileSuccessForOne(res, file, fileList){
            this.dataUrl = res.data.url
            this.model.coverUrl = res.data.url
            this.$emit('handleFileSuccessForOne',res.data.url)
        },
        //图片上传
        handleFileSuccess(res, file, fileList) {
            var images = []
            for(var item of fileList){
                if(item.response){
                    images.push(item.response.data.image.id)
                }else{
                    images.push(item.image.id)
                }
            }
            this.$emit('handleFileSuccess',images)
        },
        //文件移除
        handleFileRemove(file, fileList){
            var images = []
            for(var item of fileList){
                if(item.res){
                    images.push(item.res.data.data.image.id)
                }else{
                    images.push(item.image.id)
                }
            }
            this.$emit('handleFileSuccess',images)
        },
        beforeFileUpload(file) {
            console.log('上传前', file)
            if(file.type.indexOf('image')>-1){
                if (file.size>1024*1024*10) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                    console.log('上传图片大小不能超过 10MB!')
                    return false
                }else{
                    return true
                }
            }else if(file.type.indexOf('video')>-1){
                if (file.size>1024*1024*100) {
                    this.$message.error('上传图片大小不能超过 100MB!');
                    console.log('上传图片大小不能超过 100MB!')
                    return false
                }else{
                    return true
                }
            }
            
        },
    }
}
</script>
<style lang='scss' scoped>
/* 图片上传 */
  .avatar {
    width: 100px;
    height: 100px;
  }
  .plus{
      width: 100px;
        height: 100px;
        line-height: 100px;
        border: #eee solid 1px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #fbfdff;
    border: 1px #cccccc dotted;
  }

</style>
